<template>
    <div class="all">
      <div class="button">
          <el-button @click="addBtn($event)">添加</el-button>
          <el-button @click="putBtn($event)">修改</el-button>
          <el-button @click="delBtn($event)">删除</el-button>
        </div>
        <el-table
          
          :data="tableData"
          :row-style="{height: '60px'}"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >

          <el-table-column
            type="selection"
            width="55px"
            fixed="left"
          />

          <el-table-column
            label="序号"
            type="index"
          >
            <template scope="scope">
              <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column
            v-for="(item,index) in title"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            show-overflow-tooltip
          >

          </el-table-column>

        </el-table>
        <div class="page"> 
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[pageSize, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
          </el-pagination>
      </div>


        <!-- 新增修改 -->
        <div class="dialog">
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="27.683%"
        center="center"
        :before-close="handleClose"
      >
        <!-- 弹窗内容 -->
        <div class="content">
          <el-form
            ref="submitData"
            :model="submitData"
            
            label-width="100px"
            class="demo-ruleForm"
          >

            <!-- 名字 -->
            <el-form-item
              label="名字:"
              prop="name"
            >
              <el-input
                v-model="submitData.name"
                placeholder="输入名字"
              />
            </el-form-item>

            <!-- 排序 -->
            <el-form-item
              label="排序:"
              prop="sort"
            >
              <el-input
                v-model="submitData.sort"
                placeholder="排序"
              />
            </el-form-item>
            <!-- 描述 -->
            <el-form-item
              label="描述:"
              prop="describe"
            >
              <el-input
                v-model="submitData.describe"
                placeholder="描述"
              />
            </el-form-item>
    

          </el-form>
        </div>

        <span
          slot="footer"
          class="dialog-footer"
        >
          <div class="footer_button">
            <el-button
              type="primary"
              @click="submitForm('submitData')"
            >提交</el-button>
          </div>
        </span>
      </el-dialog>
    </div>
    </div>
  </template>
  
  <script>
  import {getRooms, getfloor, getRoomType} from "@/api/dataReq"
  import { req } from '@/api/basicReq'
  export default {
    name: 'RoomFloor',
    props: {
    
    },
    data(){
        return{
            title:[
            { prop: 'name', label: '名字' },
            { prop: 'sort', label: '排序' },
            { prop: 'describe', label: '描述' },
            
            ],
            tableData: [],
            selectData: {},
            currentPage: 1, 
            pageSize: 10, 
            total: 100, 

            dialogVisible:false,
            dialogTitle: "新增",
            submitData:{
              name:null,
              sort: null,
              describe:null,
            },

            result:null,
            Method:"post",
        }
    },
    created(){
      this.getData()
      
    },

    methods:{
      getData(){
        var reqData  ={
          page_size: this.pageSize,
          page_num: this.currentPage,
        }
        getfloor(reqData).then(response => {
          if (response.code == '1') {
            // console.log(response)
           this.tableData = response.data
           this.total = response.total

          } else {
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
      },
     

      handleClose(){
        this.dialogVisible = false
      },

        handleClick(row){

        },
        handleSelectionChange(val) {
        this.selectData = val
      
    },
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getData()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currentPage = val
        this.getData()
      },
    addBtn(ev){
      this.dialogVisible = true

      this.dialogTitle = '添加'
      if (this.submitData) {
        this.submitData = {}
      }
     
      this.dialogVisible = true
      this.Method = 'post'
    },

    putBtn(ev){
      this.Method = 'put'
      this.dialogTitle = '修改'
      if (this.selectData.length == '1') {
        this.submitData = { ...this.selectData[0] }
        this.dialogVisible = true
        
      } else if (this.selectData.length >= '1') {
        this.$message({
          message: '只能选择一条要修改的数据',
          type: 'warning'
        })
      } else {
        this.$message({
          message: '请先选择要修改的数据',
          type: 'warning'
        })
      }
    },
    delBtn(ev){
      if (this.selectData.length > 0) {
        const idList = []
        this.selectData.forEach((item) => {
          idList.push(item.id)
        })
        var data = {
          url: 'room/RoomFloor',
          method: 'delete',
          data: { id: idList }
        }
        req(data).then((res) => {
         
          if (res.code == 1) {
            this.$message.success('删除成功')
            if (
              idList.length == this.tableData.length &&
              this.currentPage != 1
            ) {
              this.currentPage--
            }
            this.getData()
          }
        })
      } else {
        this.$message({
          message: '请先选择要删除的数据',
          type: 'warning'
        })
      }
    },

    
    submitForm(){
      
      var reqData = {
        url: 'room/RoomFloor',
        method: this.Method,
        data: this.submitData
      }
      req(reqData).then(response => {
          if (response.code == '1') {
            if(this.Method=="post"){
              this.$message.success('新增成功')
            }else{
              this.$message.success('修改成功')
            }
            
            this.dialogVisible = false

            this.getData()
          } else {
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
      // console.log(formData)
    },

    }
    
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
  @import '~@/style/minxin.scss';
   $allbackcolor: rgba(11,44,108,1);
  $selectcolor: rgba(1,18,67, 1);


  .all{
    height: 80vh;
  }
.button {
        display: flex;
        justify-content: end;
        margin-bottom: 10px;
        .el-button{
  color: #fff;
  background-color: $selectcolor;
  border: 1px solid gray;
}
      }

.page{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  /deep/ .el-input__inner {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}



/deep/ li.active {
    color: rgb(50, 111, 234);
}

/deep/ .number {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .el-pagination .btn-prev {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .el-pagination .btn-next {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .el-pagination__total {
   
    color: white;
}
/deep/ .el-pagination__jump {
    
    color: white;
}
}

.imgBtn {
    // width: 100%;
    position: relative;
    .img_btn {
      @include flex-center;
      border: 1px solid #dcdfe6;
      border-radius: 5px;
      color: #dcdfe6;
      font-size: 30px;
      width: 80px;
      height: 80px;
      overflow: hidden;
    }

    .img_btn > input {
      position: absolute;
      top: 0;
      left: 0;
      width: 80px;
      height: 80px;
      z-index: 1000;
      opacity: 0;
      cursor: pointer;
    }

    .img_btn > img {
      width: 75px;
      height: 75px;
      object-fit: scale-down;
      position: absolute;
      top: center;
      left: center;
    }
  }
::v-deep {
  .tableTooltip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // 弹窗
  .el-dialog {
    min-width: 400px;
  }

  .el-form-item__label {
    text-align: center;
  }

  .el-input__inner {
    height: 30px;
  }
  // 下拉框
  .el-select {
    width: 100%;
  }

  .el-dialog--center .el-dialog__body {
    padding: 0 25px;
  }

  .hide .el-upload--picture-card {
    display: none;
  }

  .showImg {
    .el-dialog {
      height: 500px;
      @include flex-column;
      justify-content: center;
      .content {
        flex: 1;
        @include flex-center;
        img {
          width: 100%;
          height: 100%;
          object-fit: scale-down;
        }
      }
    }
  }

  .el-table__header .el-table-column--selection .cell .el-checkbox:after {
    color: #909399;
    content: '全选';
    font-size: 14px;
    margin-left: 2px;
    font-weight: bold;
  }
}
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
  color: #fff;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  color: #fff;
}
  </style>
  